<template>
  <view class="container">
    <!-- 顶部导航 -->
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">地址选择</block>
    </cu-custom>

    <!-- 输入框 -->
    <view class="cu-bar bg-white search-bar">
      <view class="search-form round" style="margin: 0;height: 80rpx;line-height: 80rpx;">
        <input v-model="keyword" placeholder="请输入地址关键词" @input="onSearch" />
      </view>
    </view>

    <!-- 提示 -->
    <view class="bg-orange light padding margin radius text-bold" v-if="!showSuggest">
      点击上方输入地址，选择相应地址，如果没有准确地址选项，选择附近地址，选择后可以备注详细地址。
    </view>

    <!-- 联想地址列表 -->
    <view v-if="showSuggest" class="suggest-list margin radius">
      <view v-for="(item, index) in suggestList" :key="index" class="cu-item" @click="selectAddress(item)">
        <view class="text-bold text-lg">{{ item.title }}</view>
        <view>{{ item.address }}</view>
      </view>
    </view>

    <!-- 地图展示 -->
    <map
      v-if="showMap"
      :latitude="location.lat"
      :longitude="location.lng"
      :markers="markers"
      style="width: 100%; height: 750rpx;"
      show-location
    />

    <!-- 底部确认弹层 -->
    <view v-if="showMap" class="bottom-panel">
      <!-- 地址信息 -->
      <view class="flex justify-between align-center">
        <view class="flex flex-shrink align-center">
          <view class="circle-tag margin-right">送</view>
          <view class="address-text">
            <view class="text-bold text-xl">{{ selectedAddress.title }}</view>
            <view class="text-lg wrap-text">{{ selectedAddress.address }}</view>
          </view>
        </view>
        <view class="cu-btn round line-black sm">更改地址</view>
      </view>

      <!-- 联系人 + 手机号 -->
      <view class="input-group-card flex align-center margin-top-sm">
        <input v-model="contact.name" placeholder="联系人" class="input-half small" />
        <view class="divider-vertical"></view>
        <input v-model="contact.phone" placeholder="手机号" class="input-half phone" />
      </view>

      <!-- 备注地址 -->
      <view class="input-remark flex align-center margin-top">
        <view class="label text-lg text-bold">备注地址</view>
        <view class="divider-vertical"></view>
        <input v-model="contact.remark" placeholder="楼栋、门牌等" class="input-right" />
      </view>

      <!-- 确认按钮 -->
      <button class="cu-btn bg-blue margin-top block" @click="confirmAddress">
        确认地址
      </button>
    </view>
  </view>
</template>

<script>
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'

export default {
  data() {
    return {
      keyword: '',
      suggestList: [],
      showSuggest: false,
      showMap: false,
      location: { lat: 27.834949, lng: 113.157518 },
      selectedAddress: {
        title: '株洲火车站',
        address: '湖南株洲市芦淞区。。。'
      },
      markers: [
        {
          id: 999,
          latitude: 27.834949,
          longitude: 113.157518,
          iconPath: '../../../static/images/location.png'
        }
      ],
      qqmapsdk: null,
      contact: {
        name: '',
        phone: '',
        remark: ''
      }
    }
  },
  onLoad() {
    this.qqmapsdk = new QQMapWX({ key: 'CO3BZ-KCAL5-PQ2I6-IJIRZ-RB6PH-E6BF2' })
  },
  methods: {
    onSearch() {
      if (!this.keyword) {
        this.showSuggest = false
        return
      }
      this.qqmapsdk.getSuggestion({
        keyword: this.keyword,
        region: '全国',
        success: res => {
          this.suggestList = res.data
          this.showSuggest = true
        },
        fail: err => {
          console.error('联想地址失败', err)
        }
      })
    },
    selectAddress(item) {
      this.location = { lat: item.location.lat, lng: item.location.lng }
      this.selectedAddress = item
      this.markers = [
        {
          id: 1,
          latitude: item.location.lat,
          longitude: item.location.lng,
          iconPath: '/static/images/loaction.png',
          title: item.title
        }
      ]
      this.showSuggest = false
      this.showMap = true
    },
    confirmAddress() {
      const result = {
        address: this.selectedAddress.title,
        full: this.selectedAddress.address,
        lat: this.location.lat,
        lng: this.location.lng,
        ...this.contact
      }
      uni.$emit('addressConfirmed', result)
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.search-bar {
  padding: 20rpx 30rpx;
  input {
    padding-left: 20rpx;
    font-size: 30rpx;
  }
}

.suggest-list {
  background: #fff;
  padding: 20rpx;
  .cu-item {
    padding: 20rpx 10rpx;
    border-bottom: 1px solid #f0f0f0;
  }
}

.bottom-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 30rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  z-index: 99;
}

.circle-tag {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #0081ff;
  color: #fff;
  font-size: 26rpx;
}

.address-text {
  max-width: 60vw;
  display: flex;
  flex-direction: column;
}

.wrap-text {
  word-break: break-word;
  white-space: normal;
}

.input-group-card {
  background-color: rgb(245, 245, 245);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.input-half {
  flex: 1;
  border: none;
  background-color: transparent;
  font-size: 28rpx;
  padding: 0 10rpx;
}

.input-half.small {
  flex: 0.8;
}

.phone {
  flex: 1.4;
}

.divider-vertical {
  width: 1rpx;
  height: 48rpx;
  background-color: #ccc;
}

.input-remark {
  background-color: rgb(245, 245, 245);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #333;
}

.input-right {
  flex: 1;
  border: none;
  background-color: transparent;
  font-size: 28rpx;
  padding: 0 10rpx;
}
</style>
